<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
	#dataShowArea{
		border:2px solid black;
		height:20px;
		width:515px;
		display:none;
	}
</style>
 <script type="text/javascript">
        function OnInput (event) {
			var xhr = new XMLHttpRequest();
			xhr.open("POST","http://localhost:8080/weekfive_day02_homework/findList",true);
			xhr.onreadystatechange = function(data){
				if(xhr.readyState==4 && xhr.status==200){
					if(xhr.responseText){
						var users = JSON.parse(xhr.responseText);
						dataShow(users);
					}else{
						noneDataShow();
					}
				}
			}
			xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			xhr.send("queryparams="+event.target.value);           
        }
        
        function dataShow(data){
        	var blockHieght = 0;
        	var showArea= document.getElementById("dataShowArea");;
        	if(data.length){
        		showArea.style.display="block";
        		for(let i = 0;i<data.length;i++){
        			blockHieght +=25;
        		}
        		showArea.style.height=blockHieght+"px";
        		var op = tableOperator(document.getElementById("tableData"),data);
				op.createTable();
        		
        	}else{
        		showArea.style.display="none";
        	}
        }
        function noneDataShow(){
        	var table = document.getElementById("tableData");
        	table.innerHTML="";
        	var tr=document.createElement("tr");
        	var td1=document.createElement("td");
        	td1.innerHTML = "暂无查询信息";
        	tr.appendChild(td1);
        	table.appendChild(tr);
        }
        
        
        function tableOperator(table,data){
				var obj = {};
				obj.createTable=function(){
					table.innerHTML="";
					data.forEach((item,index)=>{
						var tr=document.createElement("tr");
						var td1=document.createElement("td");
						td1.innerHTML = item.area;						
						tr.appendChild(td1);
						table.appendChild(tr);
					});
				}				
				return obj;	
			}
        	
 
  
    </script>
</head>
<body>
    Please modify the contents of the text field.
    <input type="text" id="queryText" oninput="OnInput (event)" onpropertychange="OnPropChanged (event)" name="queryText" placeholder="please input" />
    <div id="dataShowArea" >
    	<table id="tableData">
    	</table>
    </div>
    
</body>
</html>